
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Drop placeholder</title>

  <style>

  .light{border:1px solid red !important;}
  </style>
  <script src="../script/jquery-3.3.1.min.js"></script>
<script src="../script/jquery-ui.min.js"></script>
  <script>

$(function(){
  $( "#selector" ).draggable({
    cursor: "move",//拖动时的鼠标  move,crosshair
    //cursorAt: { left: 5 ,top:5},//拖动时  拖动对象跟随鼠标的偏移量(不设置该属性效果很不错)
    //axis:"y",//x:为沿水平可移动  y:为沿竖直可移动
    //handle: ".handler",//jquery selector 拖动的句柄,不设置整个DOM任何部位
    //distance :"10",//鼠标拖动开始偏离原始坐标多少开始进行拖动效果
    //grid:[20, 20 ],//移动坐标的最小单位
    //helper: function(){return "<div style='width:100px;height:30px;background:red'>拖动阴影</div>"} , //拖动时鼠标跟随的阴影内容,不设置则为被拖动的元素本身
    opacity:0.3,//移动时鼠标跟随阴影内容的透明度
    //containment:"#aa" ,//拖动范围对象,如果设置拖动的对象不会被拖出该值设置的容器
    create: function( event, ui ) {
      console.log("drag create");
    },
    drag: function( event, ui ) {
      console.log("drag drag");
    },
    start: function( event, ui ) {
      console.log("drag start");
    },
    stop: function( event, ui ) {
      console.log("drag stop");
    }
  });








  $( "#droppable" ).droppable({
      activate: function( event, ui ) {
        console.log("drop activate");
        
      },
      create: function( event, ui ) {
        console.log("drop create");
      },
      deactivate: function( event, ui ) {
        console.log("drop deactivate");
        $(this).removeClass("light")
      },
      drop: function( event, ui ) {
        console.log("drop drop");
      },
      out: function( event, ui ) {
        console.log("drop out");
        $(this).removeClass("light")
      },
      over: function( event, ui ) {
        console.log("drop over");
        $(this).addClass("light")
      },
  });


})

  </script>
</head>
<body>
 <div id="selector" style="width:100px;height:100px;border:1px solid #000;background:#eee;"></div>
 <br/><br/>
 <div id="droppable" style="width:1000px;height:500px;border:1px solid #000;"></div>
 
</body>
</html>